<template>
<div class="weekend">
    <div class="title">周末去哪儿</div>
    <ul>
        <li class="item border-bottom" v-for="item of weekendList" :key="item.id">
            <div class="item-img-wrapper">
              <img class="item-img" :src="item.imgUrl" alt="">
            </div>
            <div class="item-info">
              <p class="item-title">{{item.title}}</p>
              <p class="item-desc">{{item.desc}}</p>
            </div>
        </li>
    </ul>

</div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    weekendList: Array
  }

}
</script>

<style lang="scss" scoped>
@import '../../../assets/styles/mixins.scss';

.title{
  line-height: 0.8rem;
  background-color: #eee;
  text-indent: 0.2rem;
}

.item{
  .item-img-wrapper{
    overflow: hidden;
    height: 0;
    padding-bottom: 37.09%;
    background-color: rgb(84, 128, 223);
    background-clip: content-box;
    .item-img{
     width: 100%;
    }
  }

  .item-info{
    padding: 0.1rem;
    .item-title{
      line-height: 0.54rem;
      font-size: 0.32rem;
      @include ellipsis
    }
    .item-desc{
      line-height: 0.4rem;
      color:#ccc;
      @include ellipsis
    }
  }
}
</style>
